<template>
  <section class="cms-page">
    <h2 class="cms-title">资讯列表</h2>
    <el-button
      @click="editItem"
      type="primary">新增</el-button>
    <el-table
      :data="list"
      v-loading="loading"
      :show-overflow-tooltip="true"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="40">
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
      >
      </el-table-column>
      <el-table-column
        label="封面图"
        class-name="avatar-column"
      >
        <template slot-scope="scope">
          <div class="table-avatar">
            <ratio-img :src="scope.row.header_url"></ratio-img>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            @click="editItem(scope.row)"
            type="text">编辑</el-button>
          <el-button
            @click="deleteItem(scope.row)"
            :loading="scope.row.loading"
            type="text">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-if="show_pagination"
      class="cms-pagination">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="size"
        :current-page.sync="page"
        @current-change="handleChangePage"
      >
      </el-pagination>
    </div>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-05-14
   * @Project: eabax
   */
  import ratioImg from '@/components/ratio-img'
  export default {
    name: 'article-index',
    data(){
      return {
        list: [],
        page: 1,
        size: 10,
        total: 0,
        loading: false
      }
    },
    computed: {
      show_pagination(){
        return this.list.length > 0
      }
    },
    mounted(){
      this.getList()
    },
    methods: {
      handleChangePage(page){
        this.page = page
        this.getList()
      },
      getList(){
        this.loading = true
        return this.$axios.$get('/api/v1/informations', {
          params: {
            page: this.page,
            size: this.size
          }
        })
          .then(response => {
            this.loading = false
            let { total = 0, data = [] } = response
            this.total = total
            this.list = data
          })
          .catch(res => {
            this.loading = false
            this.$message({
              message: '获取列表失败',
              type: 'error'
            })
          })
      },
      editItem(row){
        this.$router.push({
          path: '/cms/article/edit',
          query: {
            id: row.id
          }
        })
      },
      deleteItem(row){
        this.$confirm('删除后将无法恢复，请确认？',{
          type: 'warning'
        })
          .then(res => {
            this.$set(row, 'loading', true)
            this.$axios
              .$post('/api/v1/information/handel', {
                id: row.id
              })
              .then(res => {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                })
                this.getList()
              })
              .catch(res => {
                this.$set(row, 'loading', false)
                this.$message({
                  message: '操作失败',
                  type: 'error'
                })
              })
          })
      }
    },
    layout: 'cms',
    components: {
      ratioImg
    }
  }
</script>

<style lang="less">

</style>
